<template>
    <v-data-table :headers="headers" :items="items" item-value="name" class="elevation-1">
        <template v-slot:item.status="{ item }">
            <v-chip variant="text" :color="item.statusColor">{{ item.status }}</v-chip> </template>
        <template v-slot:item.next_run_time="{ item }">
            {{ item.nextRunTime }} </template>
       
        <template v-slot:item.startOrStop="{ item }">
            <v-btn @click="startOrStop(item)" variant="text" :color="item.startOrStopColor">{{ item.startOrStop
            }}</v-btn>
        </template>
        <template v-slot:item.operation="{ item }">
            <v-btn variant="text" size="small" color="green" icon="mdi-pencil-outline" @click="edit(item)"></v-btn>
            <v-btn variant="text" size="small" color="red" icon="mdi-delete-alert-outline" @click="delet(item)"></v-btn>
        </template>
    </v-data-table>
</template>
<script lang="ts" setup>
import Color from 'vuetify/directives/color';
import { type TaskItem } from './_types';
const headers = [
    { title: 'NO.', key: 'no' },
    { title: '描述', key: 'description' },
    { title: '触发器', key: 'trigger' },
    { title: '状态', key: 'status' },
    { title: '结果', key: 'result' },
    { title: '下次执行时间', key: 'nextRunTime', sortable: true },
    { title: '启停', key: 'startOrStop' },
    { title: '操作', key: 'operation' }
];
const items = ref<TaskItem[]>([
    {
        no: 1, description: '任务1', trigger: '每天', status: '运行中', result: '成功', nextRunTime: '2023-10-01 10:00',
        startOrStop: "启动",
        lastRunTime: "undefined",
        statusColor: '',
        startOrStopColor: ''
    },
    {
        no: 2, description: '任务2', trigger: '每周', status: '已暂停', result: '失败', nextRunTime: '2023-10-02 11:00',
        startOrStop: "启动",
        lastRunTime: "undefined",
        statusColor: '',
        startOrStopColor: ''
    },
    {
        no: 3, description: '任务3', trigger: '每月', status: '运行中', result: '成功', nextRunTime: '2023-10-03 12:00',
        startOrStop: "启动",
        lastRunTime: "undefined",
        statusColor: '',
        startOrStopColor: ''
    }
]);
const startOrStop = (item: TaskItem) => {
    // 这里可以添加启动或停止任务的逻辑
    console.log(`操作任务: ${item.description}`);
    items.value = items.value.map((i: TaskItem) => {
        const flag = i.startOrStop === '启动' ? '停止' : '启动';
        const color = flag === '启动' ? 'green' : 'red';
        const status = flag === '启动' ? '运行中' : '已暂停';
        if (i.no === item.no) {
            return {
                ...i,
                status: status,
                statusColor: color,
                startOrStop: flag,
                startOrStopColor: color,
                nextRunTime: "" // 更新下次执行时间为当前时间
            };
        }
        return i;
    });
};

const edit = (item: TaskItem) => {
    // 这里可以添加编辑任务的逻辑
    console.log(`编辑任务: ${item.description}`);
};
const delet = (item: TaskItem) => {

    console.log(`删除任务: ${item.description}`);
};

</script>